<template>
	<div>
		<tree-select
			v-model="treeSelected"
			style="width: 300px;"
			check-strictly
			:expand-all="true"
			:load-data="loadData"
			@on-change="handleTreeSelectChange"
			@on-toggle-expand="handleTreeSelectExpand"
			@on-check-change="handleTreeSelectCheckChange"
			@on-select-change="handleTreeSelectClick"
			:data="treeData"
		></tree-select>
		<Button @click="changeTreeSelectData">更新选中数据</Button>
		<Button @click="changeTreeData">更新树数据</Button>
	</div>
</template>

<script>
import TreeSelect from '_c/tree-select';
import { newTreeData } from '@/mock/data/tree-select';
import { getTreeSelectData } from '@/api/data';
export default {
	name: 'tree_select_page',
	components: {
		TreeSelect
	},
	data() {
		return {
			treeSelected: [112, 113],
			treeData: []
		};
	},
	mounted() {
		getTreeSelectData().then(res => {
			const { data } = res;
			this.treeData = data;
		});
	},
	methods: {
		changeTreeSelectData() {
			this.treeSelected = [111, 114];
		},
		changeTreeData() {
			this.treeData = newTreeData;
			// this.treeSelected = [];
		},
		handleTreeSelectChange(list) {
			// console.log('=-========', list);
		},
		handleTreeSelectExpand(item) {
			// console.log('toggle expand', item);
		},
		handleTreeSelectCheckChange(selectedArray, item) {
			// console.log(selectedArray, item);
		},
		handleTreeSelectClick(selectArray, item) {
			// console.log(selectArray, item);
		},
		loadData(item, callback) {
			setTimeout(() => {
				let data = [
					{
						id: 111,
						title: '1-1-1'
					},
					{
						id: 112,
						title: '1-1-2'
					},
					{
						id: 113,
						title: '1-1-3'
					},
					{
						id: 114,
						title: '1-1-4'
					}
				];
				callback(data);
			}, 1000);
		}
	}
};
</script>

<style></style>
